<template>
	<view class="docx" id="docx" ref="docx">
		
	</view>
	
	<view class="btn-row">
		<CuButton @click="handleDownload">下载文件</CuButton>
		
	</view>
</template>

<script setup lang="ts">
import { nextTick, ref, Ref } from "vue"
import { onLoad } from "@dcloudio/uni-app"
import { renderAsync } from "docx-preview"
// import { createObjectBlob } from "@/utils/main"
import CuButton from "@/components/CuButton.vue"

const filePath: Ref<string> = ref("")
let filename = ""

let docx = null

const docxRender = (buffer) => {
  renderAsync(
    buffer, // Blob | ArrayBuffer | Uint8Array, 可以是 JSZip.loadAsync 支持的任何类型
    docx, // HTMLElement 渲染文档内容的元素,
    null, // HTMLElement, 用于呈现文档样式、数字、字体的元素。如果为 null，则将使用 bodyContainer。
    {
      className: "docx", // string：默认和文档样式类的类名/前缀
      inWrapper: true, // boolean：启用围绕文档内容的包装器渲染
      ignoreWidth: false, // boolean：禁用页面的渲染宽度
      ignoreHeight: false, // boolean：禁止渲染页面高度
      ignoreFonts: false, // boolean：禁用字体渲染
      breakPages: true, // boolean：在分页符上启用分页
      ignoreLastRenderedPageBreak: true, // boolean：在 lastRenderedPageBreak 元素上禁用分页
      experimental: false, // boolean：启用实验功能（制表符停止计算）
      trimXmlDeclaration: true, // boolean：如果为true，解析前会从​​ xml 文档中移除 xml 声明
      useBase64URL: false, // boolean：如果为true，图片、字体等会转为base 64 URL，否则使用URL.createObjectURL
      useMathMLPolyfill: false, // boolean：包括用于 chrome、edge 等的 MathML polyfill。
      debug: false, // boolean：启用额外的日志记录
      renderChanges: true
    }
  ).then(res => {
    console.log("success", res)
  })
}
const loadFile = () => {
  console.log("filePath", filePath.value)
	uni.showLoading({
		title: "加载中"
	})
  let xhr = new XMLHttpRequest();
  xhr.open('GET', filePath.value, true);
  xhr.responseType = 'blob';
  xhr.onload = function(e) {
		uni.hideLoading()
    if (this.status == 200) {
      let blob = new Blob([this.response], {type: "application/octet-stream"});
      // 使用blob对象进行操作
			// console.log(blob)
      docxRender(blob)
    } else {
			uni.showToast({
				icon: "none",
				title: "文件下载失败"
			})
		}
  };
	xhr.onerror = function(err) {
		uni.hideLoading()
		uni.showToast({
			icon: "none",
			title: "加载失败"
		})
	}
  xhr.send();
}

const handleDownload = () => {
	location.href = filePath.value
}

onLoad((options:any):void => {
	// filePath.value = options.filepath
	if (options.filepath) {
		filePath.value = options.filepath
		// const title = options.filepath.match(/([^<>/\\\|:""\*\?]+)\.\w+$/)[0]
		// console.log("title", title)
		document.title = options.title
		
		uni.setNavigationBarTitle({
			title: options.title
		})
		
		
		nextTick(() => {
			docx = document.getElementById("docx")
			// console.log(docx.value)
			console.log(docx)
			loadFile()
		})
		// handleDownload()
	} else {
		uni.showToast({
			icon: "none",
			title: "文件获取失败！"
		})
	}
	
	
	
		
		
})

</script>

<style lang="stylus" scoped>
.docx
	padding-bottom: 128rpx
	>>> .docx-wrapper
		padding 0!important
	>>> .docx
		width 750rpx!important
		padding 60rpx 40rpx!important
		margin-bottom: 0!important
		overflow: scroll
	>>> img
		height: unset!important
		max-width: 670rpx!important
	>>> span > div
		height: unset!important
		
.btn-row
	position: fixed
	bottom: 20rpx
	width: 100%
	padding: 0 40rpx
	z-index: 9
</style>